<template>
  <div>
	  <el-dialog
	      v-model="props.dialogVisible"
	      title="批量导入"
	      width="500"
	      :before-close="dialogClose"
	    >
	  		<el-upload
	  		  :http-request="upload"
			  :accept="props.fileTypeName"
			  :file-list="fileList"
			  drag
	  		>
			<el-icon class="el-icon--upload"><upload-filled /></el-icon>
			    <div class="el-upload__text">
			      拖拽文件或者<em>点击上传</em>
			    </div>
			    <template #tip>
			      <div class="el-upload__tip">
			        只能上传后缀为{{props.fileTypeName}}的文件
			      </div>
			    </template>
	  		</el-upload>
	      <template #footer>
	        <div class="dialog-footer">
	          <el-button @click="dialogClose">取消</el-button>
	        </div>
	      </template>
	    </el-dialog>
  </div>
</template>

<script setup name="Export">
import {
  onMounted,
  ref,
  defineProps,
  defineEmits
} from 'vue'
const props = defineProps({
	dialogVisible:{
		type:Boolean,
		default:false
	},
  fileTypeName: {
    type: String,
    default: '.xlsx, .xls'
  },
})
const emit = defineEmits([
  'upload',
  'close'
])
const fileList = ref([])
const dialogClose = () => {
	props.dialogVisible = false;
	fileList.value = []
	emit('close')
}
/**
	 * 上传附件
	 */
const upload = (file) => {
  var fileData = file.file
  const formData = new FormData()
  formData.append('file', fileData)
  emit('upload',formData)
}
onMounted(() => {
})
</script>

<style scoped>
.select {
  width: 100%;
}
</style>
